<template>
    <view class="page-box">
        <header class="header">
            <view class="title">团队数据</view>
            <view class="list row avarage verCenter">
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{team.teamPeoples}}</text>
                    <text class="t2">团队人数</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{team.teamLendingOrderCount}}</text>
                    <text class="t2">放款件数</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{team.teamLendingOrderAmount}}</text>
                    <text class="t2">放款金额</text>
                </view>
                <view class="box column rowCenter verCenter">
                    <text class="t1">{{team.teamSalary}}</text>
                    <text class="t2">团队收入</text>
                </view>
            </view>
        </header>
        <view class="section">
            <view class="tab row avarage verCenter">
                <view @click="tab(index)" class="box" :class="{curr:curr == index}" v-for="(item,index) in arr" :key="index">{{item}}</view>
            </view>
            <template v-if="curr == 0">
                <!-- 我的团队  -->
                <view class="my-team">
                    <view class="search row bothSide verCenter">
                        <input class="uni-input" placeholder="搜索团队成员名称" placeholder-style="color:#6E767A" @input="handleInput($event,1)" v-model="channelUserListSearchParams.search_user_name" />
                        <text class="iconfont icon-a-tubiaochangyongsousuo"></text>
                    </view>
                    <view class="filter-box row  verCenter">
                        <view class="item row verCenter rowCenter" style="flex: 0 0 50%;">
                            <picker @change="bindPickerChange($event,1)" :value="level_index" :range="level" range-key="name">
                                <view class="row verCenter bar">
                                    <view class="uni-input">{{level_index == -1 ? '级别选择' : level[level_index].name}}</view>
                                    <text class="ico"></text>
                                </view>
                            </picker>
                        </view>
                    </view>
                    <scroll-view scroll-y="true" style="height: calc(100vh - 546rpx);" @scrolltolower="lower">
                        <view class="list" v-if="channelUserList.length > 0">
                            <view class="box" v-for="(item,index) in channelUserList" :key="index" @click="goToTeamDetail(item.channel_user_id)">
                                <view class="btn-fixed column">
                                    <view class="btn-1 row verCenter" @click.stop="goToProductList(item.channel_user_id)">我的产品超市</view>
                                    <view class="btn-2" @click.stop="goToCommission(item.channel_user_id)">设置服务费比例</view>
                                </view>
                                <view class="top row verCenter">
                                    <image :src="item.wx_photo" mode="aspectFill"></image>
                                    <text class="t1 ellipsis" style="max-width: 290rpx;">{{item.wx_nickname}}</text>
                                    <image v-if="item.level == 1" src="http://www.szxlyc.com/uploads/product/20241111/bf07aa75de15796a583d81015fc6eb6a.png" mode="widthFix" class="level"></image>
                                    <image v-if="item.level == 3" src="http://www.szxlyc.com/uploads/product/20241111/12f3d07296f36245187f2ff3bbb3efc3.png" mode="widthFix" class="level"></image>
                                    <image v-if="item.level == 4" src="http://www.szxlyc.com/uploads/product/20241111/c3d6b9e0993f66654f54b89f9cd19546.png" mode="widthFix" class="level"></image>
                                </view>
                                <view class="info row avarage verCenter">
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.scan_qrcode_count}}</text>
                                        <text class="t2">扫码数量</text>
                                    </view>
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.order_nums}}</text>
                                        <text class="t2">进件数量 </text>
                                    </view>
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.down_level_user_nums}}</text>
                                        <text class="t2">下级成员</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="no-data column rowCenter verCenter" v-else>
                            <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
                            <text class="tt">您还没有团队成员哦～</text>
                        </view>
                    </scroll-view>
                </view>
            </template>
            <template v-else-if="curr == 1">
                <!-- 数据分析  -->
                <view class="data-analysis">
                    <view class="search row bothSide verCenter">
                        <input class="uni-input" placeholder="搜索产品名称" placeholder-style="color:#6E767A" @input="handleInput($event,2)" v-model="teamOrderListSearchParams.product_name" />
                        <text class="iconfont icon-a-tubiaochangyongsousuo"></text>
                    </view>
                    <view class="filter-box row avarage verCenter">
                        <view class="item">
                            <picker @change="bindPickerChange($event,2)" :value="product_series_index" :range="product_series" range-key="name">
                                <view class="row verCenter bar">
                                    <view class="uni-input">{{product_series_index == -1 ? '产品系列' : product_series[product_series_index].name}}</view>
                                    <text class="ico"></text>
                                </view>
                            </picker>
                        </view>
                        <text class="line"></text>
                        <view class="item">
                            <picker @change="bindPickerChange($event,3)" :value="has_order_index" :range="has_order" range-key="name">
                                <view class="row verCenter bar">
                                    <view class="uni-input">{{has_order_index == -1 ? '进件情况' : has_order[has_order_index].name}}</view>
                                    <text class="ico"></text>
                                </view>
                            </picker>
                        </view>
                    </view>
                    <scroll-view scroll-y="true" style="height: calc(100vh - 546rpx);" @scrolltolower="lower">
                        <view class="list" v-if="teamOrderList.length > 0">
                            <navigator class="box" v-for="(item,index) in teamOrderList" :key="index" :url="'/pages/order/teamDataAnalysis?product_id='+item.id">
                                <view class="top row verCenter">
                                    <image :src="item.logo" mode="aspectFill"></image>
                                    <view class="text column">
                                        <text class="t1">{{item.product_name}}</text>
                                        <text class="t2">最新活跃：{{item.recentlyAddOrderTime}}</text>
                                    </view>
                                </view>
                                <view class="info row avarage verCenter">
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.jinjianPeopleNums}}</text>
                                        <text class="t2">进件成员</text>
                                    </view>
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.noJinjianPeopleNums}}</text>
                                        <text class="t2">未进件成员</text>
                                    </view>
                                    <view class="info-box column rowCenter verCenter">
                                        <text class="t1">{{item.jinjianNums}}</text>
                                        <text class="t2">累计进件</text>
                                    </view>
                                </view>
                            </navigator>
                        </view>
                        <view class="no-data column rowCenter verCenter" v-else>
                            <image src="@/static/card.dd09cd89.png" class="pic" mode="aspectFill"></image>
                            <text class="tt">您还没有团队进件哦～</text>
                        </view>
                    </scroll-view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';


    export default {
        data() {
            return {
                level: [{ name: '我的王者', value: 3 }, { name: '我的钻石', value: 1 }],
                level_index: -1,
                hasMoreData: true, //是否分页加载
                product_series: [{ name: '甄选系列', value: 1 }, { name: '优选系列', value: 2 }, { name: '惠选系列', value: 3 }, { name: '易选系列', value: 4 }],
                product_series_index: -1,
                has_order: [{ name: '有', value: 1 }, { name: '无', value: -1 }],
                has_order_index: -1,
                arr: ['我的团队', '数据分析'],
                curr: 0,
                team: {},
                channelUserList: [], //团队成员列表
                teamOrderList: [], //团队进件列表,
                channelUserListSearchParams: {
                    search_user_name: '',
                    level: '',
                    page: 1,
                    limit: 20
                },
                teamOrderListSearchParams: {
                    product_name: '',
                    product_series: '',
                    has_order: '',
                    page: 1,
                    limit: 20
                }
            };
        },
        onLoad() {
            this.getData();
            this.getChannelUserList(); //默认加载我的团队
        },
        methods: {
            handleInput: debounce(function(e, type) {
                this.resetChange();
                if (type == 1) {
                    this.getChannelUserList();
                } else if (type == 2) {
                    this.getTeamOrderList();
                }
            }, 500),
            /**
             * 选择框监听
             * @param {Object} e
             * @param {Object} type
             */
            bindPickerChange(e, type) {
                const value = e.detail.value;
                // 重置并重新获取数据
                this.resetChange();
                switch (type) {
                    case 1: // 级别选择  
                        this.level_index = value;
                        this.channelUserListSearchParams.level = this.level[value].value;
                        this.getChannelUserList();
                        break;
                    case 2: // 产品系列
                        this.product_series_index = value;
                        this.teamOrderListSearchParams.product_series = this.product_series[value].value;
                        this.getTeamOrderList();
                        break;
                    case 3: // 进件情况
                        this.has_order_index = value;
                        this.teamOrderListSearchParams.has_order = this.has_order[value].value;
                        this.getTeamOrderList();
                        break;
                }

            },
            tab(index) {
                this.curr = index;
                this.resetChange();
                if (index == 0) {
                    this.getChannelUserList();
                } else if (index == 1) {
                    this.getTeamOrderList();
                }
            },
            /**
             * 下拉滚动事件监听
             * @param {Object} e
             */
            lower(e) {
                if (!this.hasMoreData) {
                    return;
                }
                if (this.curr == 0) {
                    this.channelUserListSearchParams.page++;
                    this.getChannelUserList();
                } else if (this.curr == 1) {
                    this.teamOrderListSearchParams.page++;
                    this.getTeamOrderList();
                }
            },
            /**
             * 团队首页
             */
            getData() {
                this.request(API.teamIndex, 'GET', {}, true).then(res => {
                    if (res.code === 0) {
                        this.team = res.data;
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 我的团队
             */
            getChannelUserList() {
                this.request(API.channelUserList, 'GET', this.channelUserListSearchParams, true).then(res => {
                    if (res.code === 0) {
                        if (res.data.list.length > 0) {
                            this.hasMoreData = true;
                            this.channelUserList = this.channelUserList.concat(res.data.list);
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 数据分析
             */
            getTeamOrderList() {
                this.request(API.teamOrderList, 'GET', this.teamOrderListSearchParams, true).then(res => {
                    if (res.code === 0) {
                        if (res.data.list.length > 0) {
                            this.hasMoreData = true;
                            this.teamOrderList = this.teamOrderList.concat(res.data.list);
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 重置数据
             */
            resetChange() {
                this.channelUserList = [];
                this.teamOrderList = [];
                this.channelUserListSearchParams.page = 1;
                this.teamOrderListSearchParams.page = 1;
            },
            goToTeamDetail(channel_user_id) {
                uni.navigateTo({
                    url: '/pages/order/teamDetail?channel_user_id=' + channel_user_id
                })
            },
            goToProductList(channel_user_id) {
                uni.navigateTo({
                    url: '/pages/mine/myProductList?channel_user_id=' + channel_user_id
                })
            },
            goToCommission(channel_user_id) {
                uni.navigateTo({
                    url: '/pages/mine/myCommission?channel_user_id=' + channel_user_id
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/order/team.scss';
</style>